<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小红书 事件机制</title>
</head>
<body onclick="handleClick(event)">
    <!-- e.target 和 e.currentTarget 区别？ --> 
        <button id="btn1">按钮1</button>
        <button id="btn2">按钮2</button>
        <button id="btn3">按钮3</button>
     </body>
     <script>
        // JS 事件底层
        // -先到达浏览器底层 body
        // - capture 事件捕获
        // - event.target DOM节点
        // - 冒泡 -> body退出 
        // 事件委托是JS优化的一种方案
        function handleClick(event) {
            console.log('点击了：',event.target.nodeName,
            ',事件绑定在',event.currentTarget.nodeName
            );
        }
     </script>
</body>
</html>